# 前言
通过前面的几个章节的学习，我们大致了解了对于 Vue 3 中的响应式原理：我们通过对 state 数据的响应式拦截，当触发 proxy setter 的时候，执行对应状态的 effect 函数。接下来看一个经典的例子：
html
复制代码<template>
<div>{{number}}</div>
<button @click="handleClick">click</button>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const number = ref(0)
function handleClick() {
for (let i = 0; i < 1000; i++) {
number.value ++;
}
}
return {
number,
handleClick
}
}
}
</script>
@前端进阶之旅: 代码已经复制到剪贴板
当我们按下 click 按钮的时候，number 会被循环增加 1000 次。那么 Vue 的视图会在点击按钮的时候，从 1 -> 1000 刷新 1000 次吗？这一小节，我们将一起探探究竟。
# queueJob
const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
function componentUpdateFn() {
if (!instance.isMounted) {
// 初始化组件
}
else {
// 更新组件
}
}
// 创建响应式的副作用渲染函数
instance.update = effect(componentUpdateFn, prodEffectOptions)
}
@前端进阶之旅: 代码已经复制到剪贴板
当时这里为了方便介绍组件的更新策略，我们简写了 instance.update 的函数创建过程，现在我们来详细看一下 instance.update 这个函数的创建：
const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
function componentUpdateFn() {
// ...
}
// 创建响应式的副作用渲染函数
const effect = (instance.
